<template>
    <div class="login_wrap">
        <div class="login_denglu">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model.trim="form.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" 
                    v-model="form.password" show-password>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onLogin">登录</el-button>
                    <el-button type="primary" @click="goRegister">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                form:{
                    name:'',
                    password:''
                }
            }
        },
        methods:{
            onLogin(){
                console.log('登录');
                // console.log(this.form.name,this.form.password);
                //在登录当中触发actions当中的login_a方法
    
                this.$store.dispatch('login_a',{
                    user_name:this.form.name,
                    password:this.form.password
                });
            },
            goRegister(){
                console.log('去注册页面');
                this.$router.push({
                    name:'register',
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
.login_wrap {
    background-image: url('~@a/img/bggrey.jpg');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login_denglu {
        background-image: url('~@a/img/bggrey.jpg');
        background-size: 100% 100%;
        width: 400px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>